<template>
  <view class="book-list">
    <u-toast ref="uToastRef"></u-toast>
    <u-sticky bgColor="#fff">
      <u-tabs
        lineHeight="0"
        itemStyle="width: calc((100% - 110px) / 5);height: 40px"
        :list="tab_list"
        activeStyle="color:#409EFF;border-bottom:2px solid #409EFF;height:38px;line-height:38px;font-size:16px"
        inactiveStyle="color:#999999;border-bottom:2px solid #fff;height:38px;line-height:38px;font-size:16px"
        @click="on_tab"
        keyName="name"
      ></u-tabs>
    </u-sticky>

    <u-list
      @scrolltolower="scrolltolower"
      :showScrollbar="true"
      lowerThreshold="100"
    >
      <view class="u-page">
        <u-list-item>
          <view class="list-item" v-for="item in list" :key="item.Id">
            <view class="base-title item-header justify-between align-center">
              <view class="align-center">
                <view class="tag flex-center">在住</view>
                <view>{{ item.Room }}</view>
              </view>
              <view
                class="align-center"
                @click="route.$route_to(receivePage_detail + '?id=' + item.Id)"
              >
                <text class="detail">详情</text>
                <image
                  style="height: 13rpx; width: 6rpx; margin-top: 6rpx"
                  src="@/static/images/receive/right.png"
                ></image>
              </view>
            </view>
            <view class="item-content">
              <view class="align-center justify-between">
                <view class="line">
                  <text class="label">姓名：</text>
                  <text class="value">{{ item.GuestName }}</text>
                </view>
              </view>

              <view class="align-center justify-between">
                <view class="line">
                  <text class="label">客源：</text>
                  <text class="value">{{ item.TheClass }}</text>
                </view>
                <view class="line">
                  <text class="label">房类：</text>
                  <text class="value">{{ item.ReceiveInClass }}</text>
                </view>
              </view>

              <view class="align-center justify-between">
                <view class="line">
                  <text class="label">消费：</text>
                  <text class="value">{{ item.AllXf }}</text>
                </view>
                <view class="line">
                  <text class="label">预结：</text>
                  <text class="value">{{ item.AllYj }}</text>
                </view>
              </view>

              <view class="align-center justify-between">
                <view class="line">
                  <text class="label">余额：</text>
                  <text class="value">{{ item.AllYsq }}</text>
                </view>
              </view>
            </view>

            <view class="item-footer justify-between">
              <view>抵店: {{ item.CheckIn }}</view>
              <view>离店: {{ item.CheckOut }}</view>
            </view>
          </view>
        </u-list-item>
        <u-loadmore
          fontSize="34rpx"
          iconSize="34rpx"
          :status="loadMoreStatus"
        />
      </view>
    </u-list>

    <view
      class="book-btn flex-center"
      @click="route.$route_to('/receivePages/pre/index')"
    >
      <u-icon
        color="#fff"
        size="40rpx"
        label="入住"
        labelPos="bottom"
        space="8rpx"
        labelSize="24rpx"
        labelColor="#fff"
        name="plus"
      ></u-icon>
    </view>
    <view
      class="book-btn flex-center"
      @click="route.$route_to('/receivePages/pre/index')"
    >
      <u-icon
        color="#fff"
        size="40rpx"
        label="入住"
        labelPos="bottom"
        space="8rpx"
        labelSize="24rpx"
        labelColor="#fff"
        name="plus"
      ></u-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {
  INF_ReceiveListV1_info,
  INF_ReceiveListV1_params,
  INF_ReceiveListV1_res,
  ReceiveListV1,
  TYPE_ReceiveClass
} from '@/api/server/v1/receive'
import route from '@/utils/route'
import { receivePage_detail } from '@/route'

type TYPE_tab_item = { name: string; key: TYPE_ReceiveClass }

const tab_list = ref<Array<TYPE_tab_item>>([
  {
    name: '全部',
    key: ''
  },
  {
    name: '全天',
    key: 'ALL'
  },
  {
    name: '钟点',
    key: 'DU'
  },
  {
    name: '免费',
    key: 'HU'
  },
  {
    name: '部分账',
    key: 'VIRTUAL'
  }
])
const list = ref<Array<INF_ReceiveListV1_info>>([])

const list_config = ref<INF_ReceiveListV1_params>({
  page: 1,
  limit: 20,
  ReceiveInClass: ''
})
//loading加载中  nomore停止加载  loadmore到底加载
const loadMoreStatus = ref('loadmore')

const on_tab = function (tab_item: TYPE_tab_item) {
  if (tab_item.key === list_config.value.ReceiveInClass) return
  list_config.value.ReceiveInClass = tab_item.key
  list_config.value.page = 1
  list.value = []
  onReceiveListV1()
}

const onReceiveListV1 = function () {
  ReceiveListV1(list_config.value).then((res) => {
    const result = res as INF_ReceiveListV1_res
    console.log(result, 'res')
    const len = result.Items.length
    if (len > 0) {
      if (len < 10) {
        result.Items.forEach((ele: any) => {
          list.value.push(ele)
        })
        loadMoreStatus.value = 'nomore'
      } else {
        result.Items.forEach((ele: any) => {
          list.value.push(ele)
        })
      }
    } else {
      loadMoreStatus.value = 'nomore'
    }
  })
}

onShow(() => {
  onReceiveListV1()
})
// page, limit
const scrolltolower = () => {
  list_config.value.page++
  onReceiveListV1()
}
</script>

<style lang="scss" scoped>
.book-btn {
  position: fixed;
  right: 20rpx;
  bottom: 200rpx;
  background-color: #409eff;
  border: 2rpx solid #409eff;
  width: 96rpx;
  height: 96rpx;
  border-radius: 100rpx;
  box-shadow: 0px 0px 6px 1px rgba(64, 158, 255, 0.89);
  position: fixed;
  right: 20rpx;
  bottom: 200rpx;
  background-color: #409eff;
  border: 2rpx solid #409eff;
  width: 96rpx;
  height: 96rpx;
  border-radius: 100rpx;
  box-shadow: 0px 0px 6px 1px rgba(64, 158, 255, 0.89);
}
.u-page {
  background-color: #f2f3f6;
  padding: 0 24rpx;
  .list-item {
    background: #ffffff;
    .item-header {
      .tag {
        width: 90rpx;
        height: 32rpx;
        background: #409eff;
        color: #ffffff;
        border-radius: 4rpx;
        font-size: 24rpx;
        margin-right: 16rpx;
      }
      .detail {
        padding-right: 10rpx;
        font-size: 26rpx;
        font-family:
          Source Han Sans CN-Regular,
          Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
    }
    .item-content {
      padding: 0 30rpx 30rpx;

      .line {
        margin-top: 38rpx;
      }
    }
    .item-footer {
      border-top: 1rpx solid #e5e5e5;
      padding: 30rpx;
      font-size: 28rpx;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }
  }
  .list-item + .list-item {
    margin-top: 20rpx;
  }
}
</style>
